<template>
  <!-- 表格部分 -->
  <div class="header">
    <el-table :data="props.dataList" :border="true" style="width: 100%" @selection-change="handleSelectionChange">
      <!-- 复选框列 -->
      <el-table-column type="selection" width="100" />
      <!-- 使用 v-for 遍历列属性 -->
      <el-table-column v-for="column in props.columns" :key="column.prop" :prop="column.prop" :label="column.label" />
      <!-- 操作列 -->
      <el-table-column label="操作" show-overflow-tooltip width="200">
        <!-- 使用插槽自定义操作列的内容 -->
        <template #default="{ row }">
          <!-- 编辑按钮 -->
          <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
          <!-- 删除按钮 -->
          <el-button type="primary" link @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 分页器部分 -->
  <div class="footer">
    <el-pagination
      v-model:current-page="localPagination.page"
      v-model:page-size="localPagination.pageSize"
      :total="localPagination.total"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
      layout="total,sizes,prev,pager,next,jumper"
      background
    />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

/* defineProps 从父组件接收的数据 */
const props = defineProps({
  //将dataList暴露给父组件
  dataList: {
    type: Array,
    required: true,
    default: () => [{ id: 1, name: 'John Doe', password: 2843, email: 46742 }]
  },
  //将列属性暴露给父组件
  columns: {
    type: Array,
    required: true,
    default: () => [{ prop: 'id', label: 'ID' }]
  },
  // 分页器设置
  pagination: {
    type: Object,
    default: () => ({
      total: 100,
      page: 1,
      pageSize: 10
    })
  }
})
/* defineEmits 暴露给父组件的方法 */
// 使用 defineEmits 注册自定义事件
const emit = defineEmits(['edit', 'delete', 'selectionChanged', 'update:pagination'])
const localPagination = ref({ ...props.pagination }) // 创建本地副本,避免直接修改props的数据
// 监听pagination的变化,实时更改 -> 父组件的更改实时更新
watch(
  () => props.pagination,
  (newValue) => {
    localPagination.value = { ...newValue }
  },
  { deep: true }
)
// 侦听当本地副本分页器数据变化时,发送新值 -> 该组件的更改实时更新
watch(
  () => localPagination.value,
  (newVal, oldVal) => {
    // 检查 `total` 是否变化
    const isTotalChanged = newVal.total === oldVal.total
    // 如果 total 没有变化，则发送新值
    if (isTotalChanged) {
      emit('update:pagination', newVal)
    }
  },
  { deep: true }
)
// 处理编辑事件
const handleEdit = (row) => {
  // 调用父组件的编辑事件并传递 row 参数至父组件
  emit('edit', row)
}
// 处理删除事件
const handleDelete = (row) => {
  // 调用父组件的删除事件并传递 row 参数至父组件
  emit('delete', row)
}
// 选中的行数据
const selectedRows = ref([])
// 处理复选框选中事件
const handleSelectionChange = (selection) => {
  selectedRows.value = selection
  // 触发自定义事件，将选中的行数据传递给父组件
  emit('selectionChanged', selectedRows.value)
}
</script>

<style scoped>
/*设置表格的内边距，使其与分页器隔开一段距离*/
.header {
  padding-bottom: 20px;
  padding-top: 20px;
}
.footer {
  display: flex;
  justify-content: center; /* 将分页器水平居中对齐 */
  align-items: center; /* 将分页器垂直居中对齐 */
  padding: 2px 5px;
}

/* 设置表格头部背景颜色 */
:deep(.el-table thead th) {
  background-color: #f5f7fa;
}
:deep(.el-table .cell) {
  text-align: center;
}
:deep(.el-table .el-table__cell) {
  text-align: center;
}
</style>
